DeepWiki

07.a - Root-Layout-&-Theming

Relevant source files

This document covers the foundational frontend infrastructure of godeep.wiki: the root layout component, global theming system, color palette implementation, and third-party service integrations. The root layout establishes the HTML structure, font loading, metadata configuration, and analytics integration that applies to all pages in the application.

For details on individual UI components and animations used within pages, see UI Components & Animations. For information about static content pages, see Legal & Static Pages.

The application uses Next.js 14's App Router with a single root layout that wraps all pages. The layout is defined in app/layout.tsx

and serves as the entry point for global configuration.

Sources: app/layout.tsx L1-L82

FeatureImplementationPurpose
Font LoadingGeist and Geist_Mono from next/font/googleSystem-wide typography with automatic optimization
Dark ModeclassName="dark" on <html> elementForces dark theme globally (no toggle)
CSS Resetglobals.css importTailwind CSS v4 with custom theme tokens
Analytics@vercel/analytics/next componentTracks page views and user interactions
Cloudflare BeaconScript tag with deferred loadingWeb analytics and performance monitoring

Sources: app/layout.tsx L8-L9

app/layout.tsx L66

app/layout.tsx L6

app/layout.tsx L69

app/layout.tsx L70-L77

The root layout defines comprehensive SEO metadata using Next.js's Metadata API:

Key metadata elements:

Sources: app/layout.tsx L11-L56

Color System & Design TokensLink copied!

The application uses a sophisticated theming system based on oklch color space defined in app/globals.css

Sources: app/globals.css L6-L116

The system defines two complete color palettes (light and dark) using oklch color values:

Token NameLight Mode (oklch)Dark Mode (oklch)Usage
--background1 0 0 (white)0.145 0 0 (near black)Page background
--foreground0.145 0 0 (near black)0.985 0 0 (near white)Primary text
--primary0.205 0 0 (dark gray)0.985 0 0 (near white)Primary UI elements
--secondary0.97 0 0 (light gray)0.269 0 0 (dark gray)Secondary elements
--muted0.97 0 00.269 0 0Muted backgrounds
--border0.922 0 00.269 0 0Border colors
--destructive0.577 0.245 27.3250.396 0.141 25.723Error/warning states

Sources: app/globals.css L6-L40

app/globals.css L42-L75

The system uses oklch (a perceptually uniform color space) rather than RGB/HSL for several technical advantages:

  1. Perceptual Uniformity: Equal numeric changes produce equal perceived changes in color
  2. Wider Gamut: Accesses colors beyond sRGB color space
  3. Better Interpolation: Smooth color transitions without unexpected hue shifts
  4. Accessibility: Easier to maintain consistent contrast ratios

oklch Format: oklch(lightness chroma hue)

  • Lightness: 0-1 (0=black, 1=white)
  • Chroma: 0-0.4+ (0=grayscale, higher=more saturated)
  • Hue: 0-360 degrees (color wheel angle)

Sources: app/globals.css L7-L8

Five chart color tokens are defined for data visualization components:

--chart-1 through --chart-5 (light mode):
  oklch(0.646 0.222 41.116)  // Orange
  oklch(0.6 0.118 184.704)    // Cyan
  oklch(0.398 0.07 227.392)   // Blue
  oklch(0.828 0.189 84.429)   // Yellow-green
  oklch(0.769 0.188 70.08)    // Yellow

Sources: app/globals.css L26-L30

app/globals.css L62-L66

The application implements a forced dark mode with no user toggle option.

The dark mode is enforced at the root level by applying the dark class directly to the <html> element in app/layout.tsx L66

A custom Tailwind variant enables dark mode class inheritance:

@custom-variant dark (&:is(.dark *));

This configuration at app/globals.css L4

tells Tailwind CSS v4 that any element within a .dark ancestor should use dark mode styles.

When the .dark class is active, all design tokens are remapped to dark variants:

Note: Primary and primary-foreground colors are inverted in dark mode, allowing the same UI components to work in both themes without modification.

Sources: app/globals.css L42-L75

Typography & FontsLink copied!

The application uses Next.js's next/font/google for optimized font loading:

Font declarations:

Sources: app/layout.tsx L3

app/layout.tsx L8-L9

Font families are mapped to Tailwind utilities via the @theme inline directive:

--font-sans: 'Geist', 'Geist Fallback';--font-mono: 'Geist Mono', 'Geist Mono Fallback';

These tokens at app/globals.css L78-L79

enable usage of font-sans and font-mono Tailwind classes throughout the application.

Body Typography ConfigurationLink copied!

The <body> element applies base typography styles:

body {  @apply bg-background text-foreground;}

Combined with the className prop: font-sans antialiased bg-background text-foreground app/layout.tsx L67

  • font-sans: Applies Geist font family
  • antialiased: Enables font smoothing (-webkit-font-smoothing: antialiased)
  • bg-background: Uses theme background color
  • text-foreground: Uses theme foreground color

Sources: app/globals.css L123-L125

app/layout.tsx L67

Border & Radius SystemLink copied!

A global border reset ensures consistent border styling:

* {  @apply border-border outline-ring/50;}

This rule at app/globals.css L119-L121

applies to all elements:

  • border-border: Uses --color-border for all borders
  • outline-ring/50: Uses --color-ring at 50% opacity for focus outlines

The system defines a cohesive radius scale:

TokenValueUsage
--radius0.625rem (10px)Base radius value
--radius-smcalc(var(--radius) - 4px)6px - Small elements
--radius-mdcalc(var(--radius) - 2px)8px - Medium elements
--radius-lgvar(--radius)10px - Large elements
--radius-xlcalc(var(--radius) + 4px)14px - Extra large elements

Sources: app/globals.css L31

app/globals.css L104-L107

The global stylesheet defines reusable animation keyframes used throughout the application.

The enter animation provides a smooth fade-in with vertical movement:

@keyframes enter {  0% {    opacity: 0;    transform: translateY(10px);    filter: blur(4px);  }  100% {    opacity: 1;    transform: none;    filter: none;  }}

Animation Properties:

  • Duration: 0.6s
  • Fill Mode: both (applies styles before and after animation)
  • Effects: Opacity fade, upward movement, blur removal

Usage Class: .animate-enter app/globals.css L142-L144

Sources: app/globals.css L128-L144

The reveal-down animation creates a vertical reveal effect using clip-path:

@keyframes reveal-down {  0% {    clip-path: inset(0 0 100% 0);  }  100% {    clip-path: inset(0 0 0 0);  }}

Animation Properties:

  • Duration: 1s
  • Easing: cubic-bezier(0.77, 0, 0.175, 1) (smooth acceleration/deceleration)
  • Fill Mode: both
  • Effect: Content reveals from top to bottom

Usage Class: .animate-reveal app/globals.css L156-L158

This animation is used by the BackgroundReveal component with staggered delays components/background-reveal.tsx L11

Sources: app/globals.css L146-L158

Sources: app/globals.css L128-L158

components/fade-in.tsx

components/background-reveal.tsx

The root layout includes Vercel Analytics for automatic page view tracking:

<Analytics />

Imported from @vercel/analytics/next app/layout.tsx L4

and rendered after the main content app/layout.tsx L69

Features:

  • Automatic page view tracking
  • Core Web Vitals monitoring
  • No configuration required
  • Privacy-friendly (no cookies)

Cloudflare's beacon script provides additional analytics and performance monitoring:

<Script  defer  src="https://static.cloudflareinsights.com/beacon.min.js"  data-cf-beacon={`{"token": "${cfBeaconToken}"}`}  strategy="afterInteractive"/>

Configuration:

  • Token Source: NEXT_PUBLIC_CF_BEACON_TOKEN environment variable app/layout.tsx L63
  • Default Token: "ab3529b8b0844e25bb614474e5a56035" (fallback)
  • Loading Strategy: afterInteractive (loads after page becomes interactive)
  • Deferred: Uses defer attribute for non-blocking load

Conditional Rendering: The script only renders if cfBeaconToken is truthy app/layout.tsx L70

Sources: app/layout.tsx L63-L77

Sources: app/layout.tsx L69

app/layout.tsx L70-L77

The application uses Next.js's dynamic favicon generation via the icon.tsx route handler.

Configuration:

The favicon renders a simple "D" character with the following styles:

PropertyValuePurpose
BackgroundblackMatches dark theme
Text ColorwhiteHigh contrast
Font Size24pxReadable at small sizes
Font Weight800Bold, distinctive
Border Radius8pxRounded corners

Sources: app/icon.tsx L14-L38

Next.js automatically:

  1. Detects the icon.tsx file
  2. Creates a /icon route
  3. Generates appropriate <link rel="icon"> tags in the HTML <head>
  4. Serves the dynamically generated PNG on request

Sources: app/icon.tsx

Import Sequence:

  1. @import 'tailwindcss' app/globals.css L1 - Tailwind CSS v4 base
  2. @import 'tw-animate-css' app/globals.css L2 - Animation utilities
  3. Custom variant definition app/globals.css L4 - Dark mode variant
  4. CSS custom properties app/globals.css L6-L75 - Design tokens
  5. Theme inline app/globals.css L77-L116 - Tailwind integration
  6. Base layer app/globals.css L118-L126 - Global resets
  7. Keyframe animations app/globals.css L128-L158 - Animation definitions

Sources: app/globals.css L1-L158

The root layout and theming system provides:

  • Single Layout Component: app/layout.tsx wraps all application pages
  • OKLCH Color System: Perceptually uniform color space with light/dark variants
  • Forced Dark Mode: Applied via className="dark" on root HTML element
  • Optimized Fonts: Google Fonts loaded via next/font with automatic optimization
  • Design Token System: CSS custom properties mapped to Tailwind utilities
  • Animation Framework: Reusable keyframe animations for consistent motion
  • Dual Analytics: Vercel Analytics and Cloudflare Beacon integration
  • Dynamic Favicon: Edge-rendered PNG favicon generation
  • Comprehensive Metadata: SEO-optimized meta tags and Open Graph configuration

This infrastructure establishes a consistent visual foundation and performance baseline for all pages in the godeep.wiki application.

Sources: app/layout.tsx

app/globals.css

app/icon.tsx

Refresh this wiki

Last indexed: 23 November 2025 (922b35)

On this page

Ask Devin about godeep.wiki-jb

Syntax error in text

mermaid version 11.4.1

07.a - Root-Layout-&-Theming | DeepWiki | godeep.wiki